<html lang="zh-cn">
<head>
{% include "tdm_include_head_template.html" %}

<script type="text/javascript">
var code;
function createCode() {
  code = "";
  var codeLength = 4; //验证码的长度
  var codeString = '0,1,2,3,4,5,6,7,8,9,a,b,c,d,e,f,g,h,i,j,k,l,m,n,o,p,q,r,s,t,u,v,w,x,y,z' //验证码的字符，也可以用中文的
  var codeChars = codeString.split(',');
  for (var i = 0; i < codeLength; i++) {
    var charNum = Math.floor(Math.random() * codeChars.length);
    code += codeChars[charNum];
  }
  $("#checkCode").html(code);
}

$(function() {
  createCode();
  $("#signin").submit(function() {
    inputCode = $("#inputCode").val();
    if (inputCode.length <= 0) {
      alert("请输入验证码！");
      return false;
    } else if (inputCode.toUpperCase() != code.toUpperCase()) {
      alert("验证码输入有误！");
      createCode();
      return false;
    } else {
      return true;
    }
  });
});
</script>

</head>

<body class=" theme-blue">
{% include "tdm_include_navbar_template.html" %}

<div class="container">
<br/>
{% include "tdm_include_error_template.html" %}

  <form id="signin" class="form-signin" role="form" action="/tdm/login/" method="POST">
    {% csrf_token %}
    <h2 class="form-signin-heading">请登陆</h2>
    <input type="text" name="username" class="form-control" placeholder="用户名" required autofocus>
    <input type="password" name="password" class="form-control" placeholder="密码" required autocomplete="off">
    <div class="input-group">
      <input type="text" id="inputCode" class="form-control" placeholder="验证码" aria-describedby="checkCode">
      <span class="input-group-addon" id="checkCode" onclick="createCode()">xxx</span>
    </div>
    <div class="checkbox">
      <label>
        <input type="checkbox" name="remember" value="remember"> 记住我
      </label>
    </div>
    <br/>
    <button class="btn btn-lg btn-primary btn-block" type="submit">登陆</button>
  </form>
</div>

</body>
</html>